<template>
  <div class="areapicker-wrap">
    <w-select v-if="isLoading" v-model="province" :options="aProvince" @on-select="onSelectProvince"></w-select>
    <w-select v-if="isLoading" v-model="city" :options="aCity" @on-select="onSelectCity"></w-select>
    <w-select v-if="isLoading" v-model="district" :options="aDistrict" @on-select="onSelectDist"></w-select>
    <input type="hidden" :name="name" :value="district">
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  export default {
    props: {
      value: '',
      name: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        aCity: [],
        aDistrict: [],
        province: '',
        city: '',
        district: ''
      }
    },
    created() {
      this.fetchAllArea(() => {
        this._updateCity()
        this._updateDistrict()
      })
      if (this.value.indexOf > 0) {
        this._updateSelectList(this.value)
        this._updateCity()
        this._updateDistrict()
      }
    },
    methods: {
      ...mapActions(['fetchAllArea']),
      // 根据选择省份，获取城市数据
      _updateCity() {
        // 清空地级市
        this.aDistrict = []
        for (let i in this.allArea) {
          const prov = this.allArea[i]
          if (this.province == prov.id) {
            if (!prov.childs) {
              this.aCity = []
              this.aDistrict = []
              this.city = ''
              this.district = ''
              return
            }
            this.aCity = prov.childs
            this.aCity.forEach(item => {
              item.value = item.id
              item.label = item.areaName
            })
            break
          }
        }
      },
      // 根据选择城市，获取地级市数据
      _updateDistrict() {
        for (let i in this.aCity) {
          const dist = this.aCity[i]
          if (this.city == dist.id) {
            if (!dist.childs) {
              this.aDistrict = []
              this.district = ''
              return
            }
            this.aDistrict = dist.childs.map(item => {
              return {
                value: item.id,
                label: item.areaName
              }
            })
            break
          }
        }
      },
      // 点击省份选择框
      onSelectProvince(val) {
        this._updateCity()
        this.city = ''
        this.district = ''
        this.$emit('change')
      },
      // 点击城市选择器
      onSelectCity(val) {
        this._updateDistrict()
        this.district = ''
        this.$emit('change')
      },
      // 点击地级市选择器，确定选择id
      onSelectDist(val) {
        this.$emit('input', val.toString())
      },
      // 父级更新更新数据
      _updateSelectList(val) {
        const aVal = val.split('/')
        this.province = aVal[0]
        this.city = aVal[1]
        this.district = aVal[2]
        this._updateCity()
        this._updateDistrict()
        this.$emit('input', aVal[2])
      }
    },
    computed: {
      ...mapGetters(['allArea', 'isLoading']),
      // 初始化省份数据
      aProvince() {
        if (this.allArea) {
          return this.allArea.map(item => {
            return {
              value: item.id,
              label: item.areaName
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .areapicker-wrap {
    display: inline-block;
    .select-wrap {
      display: inline-block;
    }
  }
</style>